<template>
  <div class="detailContainer">
    <div v-show="isBack" class="back">
      <img @click="backPrev" @mouseenter="initTimeout" @mouseleave="removeTimeout" src="@/assets/home/ico_back.png" alt="" />
    </div>

    <div v-show="isBackmore" class="backmore">
      <div @click="toPage('/homePage')" class="backbox">
        <img src="@/assets/home/ico_mars1.png" alt="" />
        <div class="backtext">基地列表</div>
      </div>
      <div @click="toPage('/basePage')" class="backbox">
        <img src="@/assets/home/ico_mars2.png" alt="" />
        <div class="backtext">基地</div>
      </div>
      <div @click="toPage('/modelPage')" class="backbox">
        <img src="@/assets/home/ico_mars3.png" alt="" />
        <div class="backtext">近景</div>
      </div>
    </div>

    <div v-show="isDetail" class="detail">
      <div class="detail_left detail_unify">
        <div class="detail_box">
          <div class="detailTitle">
            <div class="detail_title_box">
              <img src="@/assets/home/ico_title.png" alt="">
              <div>能源监测</div>
            </div>
            <div @click="showDetail('能源监测')" class="detail_tit_more">
              <div>详情</div>
              <img src="@/assets/home/ico_more.png" alt="" />
            </div>
          </div>
          <div class="detailBox">
            <div class="detailList">
              <div class="detail_name">输入电压</div>
              <div class="detail_cont">
                <div class="detail_num">220</div>
                <div class="detail_unit">V</div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">输入电流</div>
              <div class="detail_cont">
                <div class="detail_num">30</div>
                <div class="detail_unit">A</div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">噪音</div>
              <div class="detail_cont">
                <div class="detail_num">50</div>
                <div class="detail_unit">Hz</div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">输出电压</div>
              <div class="detail_cont">
                <div class="detail_num">220</div>
                <div class="detail_unit">V</div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail_box">
          <div class="detailTitle">
            <div class="detail_title_box">
              <img src="@/assets/home/ico_title.png" alt="">
              <div>湿度监测</div>
            </div>
            <div @click="showDetail('湿度监测')" class="detail_tit_more">
              <div>详情</div>
              <img src="@/assets/home/ico_more.png" alt="" />
            </div>
          </div>
          <div class="detailBox">
            <div class="detailList">
              <div class="detail_name">当前湿度</div>
              <div class="detail_cont">
                <div class="detail_num">50</div>
                <div class="detail_unit">%</div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">预警湿度</div>
              <div class="detail_cont">
                <div class="detail_num">30</div>
                <div class="detail_unit">%</div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail_box">
          <div class="detailTitle">
            <div class="detail_title_box">
              <img src="@/assets/home/ico_title.png" alt="">
              <div>温度监测</div>
            </div>
            <div @click="showDetail('温度监测')" class="detail_tit_more">
              <div>详情</div>
              <img src="@/assets/home/ico_more.png" alt="" />
            </div>
          </div>
          <div class="detailBox">
            <div class="detailList">
              <div class="detail_name">当前温度</div>
              <div class="detail_cont">
                <div class="detail_num">37</div>
                <div class="detail_unit">℃</div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">预警温度</div>
              <div class="detail_cont">
                <div class="detail_num">35</div>
                <div class="detail_unit">℃</div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail_box">
          <div class="detailTitle">
            <div class="detail_title_box">
              <img src="@/assets/home/ico_title.png" alt="">
              <div>水循环监测</div>
            </div>
            <div @click="showDetail('水循环监测')" class="detail_tit_more">
              <div>详情</div>
              <img src="@/assets/home/ico_more.png" alt="" />
            </div>
          </div>
          <div class="detailBox">
            <div class="detailList">
              <div class="detail_name">1#泵体</div>
              <div class="detail_cont">
                <div class="detail_num green">正常</div>
                <div class="detail_unit"></div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">2#泵体</div>
              <div class="detail_cont">
                <div class="detail_num green">正常</div>
                <div class="detail_unit"></div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">3#泵体</div>
              <div class="detail_cont">
                <div class="detail_num red">故障</div>
                <div class="detail_unit"></div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">4#泵体</div>
              <div class="detail_cont">
                <div class="detail_num off">关闭</div>
                <div class="detail_unit"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail_right detail_unify">
        <div class="detail_box">
          <div class="detailTitle">
            <div class="detail_title_box">
              <img src="@/assets/home/ico_title.png" alt="">
              <div>光照强度</div>
            </div>
            <div @click="showDetail('光照强度')" class="detail_tit_more">
              <div>详情</div>
              <img src="@/assets/home/ico_more.png" alt="" />
            </div>
          </div>
          <div class="detailBox">
            <div class="detailList">
              <div class="detail_name">当前光照</div>
              <div class="detail_cont">
                <div class="detail_num">37</div>
                <div class="detail_unit">℃</div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">预警光照</div>
              <div class="detail_cont">
                <div class="detail_num">35</div>
                <div class="detail_unit">℃</div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail_box">
          <div class="detailTitle">
            <div class="detail_title_box">
              <img src="@/assets/home/ico_title.png" alt="">
              <div>二氧化碳监测</div>
            </div>
            <div @click="showDetail('二氧化碳监测')" class="detail_tit_more">
              <div>详情</div>
              <img src="@/assets/home/ico_more.png" alt="" />
            </div>
          </div>
          <div class="detailBox">
            <div class="detailList">
              <div class="detail_name">当前浓度</div>
              <div class="detail_cont">
                <div class="detail_num">0.5</div>
                <div class="detail_unit">%</div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">预警浓度</div>
              <div class="detail_cont">
                <div class="detail_num">0.3</div>
                <div class="detail_unit">%</div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail_box">
          <div class="detailTitle">
            <div class="detail_title_box">
              <img src="@/assets/home/ico_title.png" alt="">
              <div>营养液监测</div>
            </div>
            <div @click="showDetail('营养液监测')" class="detail_tit_more">
              <div>详情</div>
              <img src="@/assets/home/ico_more.png" alt="" />
            </div>
          </div>
          <div class="detailBox">
            <div class="detailList">
              <div class="detail_name">当前液位</div>
              <div class="detail_cont">
                <div class="detail_num">278</div>
                <div class="detail_unit">mL</div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">预警液位</div>
              <div class="detail_cont">
                <div class="detail_num">98</div>
                <div class="detail_unit">mL</div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">是否缺液</div>
              <div class="detail_cont">
                <div class="detail_num green">否</div>
                <div class="detail_unit"></div>
              </div>
            </div>
            <div class="detailList">
              <div class="detail_name">泵机状态</div>
              <div class="detail_cont">
                <div class="detail_num green">正常</div>
                <div class="detail_unit"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail_box">
          <div class="detailTitle">
            <div class="detail_title_box">
              <img src="@/assets/home/ico_title.png" alt="">
              <div>传感器监控画面</div>
            </div>
            <div @click="showDetail('监控画面')" class="detail_tit_more">
              <div>详情</div>
              <img src="@/assets/home/ico_more.png" alt="" />
            </div>
          </div>
          <div class="detailBox">
            <div class="detail_carme" id="detail_carme">
              <HkVideo v-if="isDetail" ref="detailCarme" class="detail_carme_video" :props-data="hkList.camera01"></HkVideo>
              <!-- <img src="@/assets/home/img_camera.png" alt="" /> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="isPron" class="pron">
      <div class="pron_top">
        <div class="pron_title">{{ pron.title }}</div>
        <div @click="closePron" class="pron_close">
          <img src="@/assets/home/ico_close.png" alt="" />
        </div>
      </div>
      <div v-if="isMonitor" class="pron_bot">
        <div class="pron_monitor" id="carme_monitor">
          <HkVideo ref="carmeMonitor" class="detail_carme_video" :props-data="hkList.camera02"></HkVideo>
        </div>
      </div>
      <div v-else class="pron_bot">
        <div class="pron_left">
          <div class="pron_left_cont">
            <div class="pron_left_cont_name">当前湿度</div>
            <div class="pron_left_cont_text">
              <div class="pron_left_cont_num">50</div>
              <div class="pron_left_cont_unit">%</div>
            </div>
          </div>
          <div class="pron_left_cont">
            <div class="pron_left_cont_name">预警湿度</div>
            <div class="pron_left_cont_text">
              <div class="pron_left_cont_num">30</div>
              <div class="pron_left_cont_unit">%</div>
              <div class="pron_left_cont_control">
                <img src="@/assets/home/ico_control.png" alt="" />
              </div>
            </div>
          </div>
          <div class="pron_chart">
            <div id="pronChart" ref="pronChart"></div>
          </div>
        </div>
        <div class="pron_right">
          <div class="pron_right_tit">
            <img src="@/assets/home/ico_control_icon.png" alt="" />
            <div>监控设备</div>
          </div>
          <div class="pron_right_box">
            <div class="pron_right_box_img">
              <img src="@/assets/home/img_control_temp.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="isProgress" class="progress_bar">
      <div v-if="isError" class="progress-bar">
        <div class="bar" :style="{ width: progress + '%' }"></div>
      </div>
      <!-- <div class="label">{{ progress }}%</div> -->
      <div v-else class="label">加载异常，请刷新重试！</div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, onBeforeUnmount, watch, nextTick } from 'vue'
  import { useRouter } from 'vue-router'
  import * as THREE from 'three';
  import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
  import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js"
  import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader"
  import * as echarts from "echarts"
  import HkVideo from '@/components/hkvideo/hkvideo.vue';

  let myChart;

  let three = null
  const router = useRouter()
  let controls = null

  let isBack = ref(false)
  let isBackmore = ref(false)
  let isDetail = ref(false)
  let isPron = ref(false)
  let pron = {
    title: '详情'
  }
  let isMonitor = ref(false)
  let progress = ref(0)
  let timer = null
  let isProgress = ref(true)
  let isError = ref(true)
  let timeoutId = null
  let isGlbShow = ref(false)

  let hkList = {
    camera01: {
      szIP: "169.254.87.184", //IP地址
      szPort: "80", //端口号
      szUsername: "admin",
      szPassword: "root2024",
      iChannelID: 1,//通道ID
      loadingTime: "1000",// 多视频窗口睡眠加载时长。同时多个加载会卡死或不显示
      width: "320",
      height: "130",
      type: "camera01",
      id:"divPlugin1",
    },
    camera02: {
      szIP: "169.254.87.184", //IP地址
      szPort: "80", //端口号
      szUsername: "admin",
      szPassword: "root2024",
      iChannelID: 1,//通道ID
      loadingTime: "1000",// 多视频窗口睡眠加载时长。同时多个加载会卡死或不显示
      width: "1096",
      height: "372",
      type: "camera02",
      id:"divPlugin2",
    },
  }
  let carmeMonitor = ref()
  let detailCarme = ref()

  const showThreeGltf = () => {
    three = window.three

    controls = window.three.controls
    controls.autoRotate = false;
    controls.enabled = false;
    controls.enablePan = false
    controls.enableRotate = false
    controls.enableZoom = false

    const loaderfbx = new FBXLoader();
    const GLBLoader = new GLTFLoader();
    const dracoLoader = new DRACOLoader()
    // 设置draco路径
    dracoLoader.setDecoderPath('/draco/');
    // 使用js方式解压
    dracoLoader.setDecoderConfig({ type: "js" });
    // 初始化_initDecoder 解码器
    // dracoLoader.preload();
    // 设置gltf加载器draco解码器
    GLBLoader.setDRACOLoader(dracoLoader);
    
    createLight()
    GLBLoader.load('/Mars/cangnei1.glb', (gltf) => {
      gltf.scene.scale.set(2, 2, 2)
      gltf.scene.position.set(0.31, -2.1, 0.8)
      gltf.scene.rotation.set(0, 0, 0)
      _ChangeMaterialEmissive(gltf.scene)
      isGlbShow.value = gltf.scene.visible
      three.scene.add(gltf.scene)
    }, (progressEvent) => {
      const { loaded ,total ,lengthComputable } = progressEvent;
      if(lengthComputable) {
        progress.value = (loaded / total * 100).toFixed(1) - 1
        three.camera.position.set(0.684987673759365, 1.3453461357412176, 10.290919879739705)
        three.camera.updateProjectionMatrix();
        three.renderer.render(three.scene, three.camera);
        controls.update();
      } else {
        isError.value = false
      }
    }, (error) => {
      console.log('error:', error)
      isError.value = false
    })

    // loaderfbx.load('/Mars/youhua1/1.FBX', (fbx) => {
    //   console.log('fbx:', fbx)
    //   fbx.scale.set(0.001, 0.001, 0.001)
    //   fbx.position.set(0, 0, 0)
    //   three.camera.position.set(-6.651480681602699, 2.8816646782218944, -0.3640558432845517)
    //   // three.camera.lookAt(new THREE.Vector3(-6.651480681602699, 2.8816646782218944, -0.3640558432845517))
    //   three.camera.updateProjectionMatrix();
    //   three.scene.add(fbx)
    //   _ChangeMaterialEmissive(fbx)
    // }, (progressEvent) => {
    //   const { loaded ,total ,lengthComputable } = progressEvent;
    //   if(lengthComputable) {
    //     progress.value = (loaded / total * 100).toFixed(1)
    //     clearInterval(timer)
    //     timer = null
    //     setTimeout(() => {
    //       isProgress.value = false
    //       isDetail.value = true
    //       isBack.value = true
    //     }, 2500);
    //   } else {
    //     console.log('已加载'+loaded+'字节' )
    //     isError.value = false
    //   }
    // }, (error) => {
    //   console.log('error:', error)
    // })

    animate()
  }

  const _ChangeMaterialEmissive = (parent) => {
    parent.traverse(function (obj) {
      if(obj.name == '对象4864') {
        obj.material.emissive = new THREE.Color(1, 1, 1);
        obj.material.emissiveIntensity = 0.7;
        obj.material.emissiveMap = obj.material.map;
      }
      // if(obj instanceof THREE.Mesh) {
      //   obj.material.emissive = new THREE.Color(0.8, 0.8, 0.8);
      //   obj.material.emissiveIntensity = 1;
      //   obj.material.emissiveMap = obj.material.map;
      // }
    });
  }

  const createLight = () => {
    // // 创建光源 点光源
    // const directionalLight = new THREE.DirectionalLight(0xFFC0CB, 3);
    // directionalLight.position.set(10, 10, 10);
    // // directionalLight.castShadow = true
    // three.scene.add(directionalLight);
    // const directionalLight2 = new THREE.DirectionalLight(0xFFC0CB, 3);
    // directionalLight2.position.set(-10, 10, -10);
    // // directionalLight2.castShadow = true
    // three.scene.add(directionalLight2);
    // const directionalLight3 = new THREE.DirectionalLight(0xFFC0CB, 3);
    // directionalLight3.position.set(10, -10, 10);
    // // directionalLight3.castShadow = true
    // three.scene.add(directionalLight3);
    // const directionalLight4 = new THREE.DirectionalLight(0xFFC0CB, 3);
    // directionalLight4.position.set(-10, -10, -10);
    // // directionalLight4.castShadow = true
    // three.scene.add(directionalLight4);

    const ambientLight = new THREE.AmbientLight(0xffffff, 4)
    three.scene.add(ambientLight)
    
    // 中
    const pointLight = new THREE.PointLight(0xFFC0CB, 10, 100, 0.5)
    pointLight.position.set(2, 1, 0)
    // pointLight.power = 300
    three.scene.add(pointLight)
    // 左
    const pointLight2 = new THREE.PointLight(0xFFC0CB, 20, 100, 1.5)
    pointLight2.position.set(2, 1, 5)
    three.scene.add(pointLight2)
    // 右
    const pointLight3 = new THREE.PointLight(0xFFC0CB, 20, 100, 1.5)
    pointLight3.position.set(2, 1, -5)
    three.scene.add(pointLight3)
   
    // 指示器
    // const sphereSize = 1;
    // const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
    // const pointLightHelper2 = new THREE.PointLightHelper( pointLight2, sphereSize );
    // const pointLightHelper3 = new THREE.PointLightHelper( pointLight3, sphereSize );
    // three.scene.add( pointLightHelper );
    // three.scene.add( pointLightHelper2 );
    // three.scene.add( pointLightHelper3 );
  }

  const startProgress = () => {
    isProgress.value = true
    timer = setInterval(() => {
      progress.value += 2
      if (progress.value >= 95) {
        // progress = 0
        // timer = null
        clearInterval(timer)
      }
    }, 100)
  }

  const showMoreDiv = () => {
    if(progress.value >= 99) {
      clearInterval(timer)
      timer = null
      setTimeout(() => {
        isProgress.value = false
        isDetail.value = true
        isBack.value = true
      }, 1000);
    }
  }

  // 详情弹窗
  const showDetail = (name) => {
    resetPron()
    pron.title = name
    isPron.value = true
    if(name == '监控画面') {
      isMonitor.value = true
    } else {
      setTimeout(() => {
        getChart()
      }, 0);
    }
  }

  const resetPron = () => {
    pron = {
      title: '',
    }
  }

  // 关闭详情弹窗
  const closePron = () => {
    if(carmeMonitor.value) {
      carmeMonitor.value.cameraShow = false
      carmeMonitor.value.clickStopRealPlay()
      carmeMonitor.value.destruction()
    }
    
    isPron.value = false
    isMonitor.value = false
  }

  // 加载charts图
  const getChart = () => {
    if(myChart != null && myChart != "" && myChart != undefined) {
      myChart.dispose()
    }
    
    let chartDom = document.getElementById("pronChart")
    myChart = echarts.init(chartDom)
    myChart.clear()
    let option = {
      // backgroundColor: '#394056',
      title: {
        text: "折线",
        show: false,
        textStyle: {
          fontWeight: "normal",
          fontSize: 16,
          color: "#F1F1F3",
        },
        left: "6%",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: "#57617B",
          },
        },
      },
      legend: {
        icon: "rect",
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ["当前", "预警"],
        right: "4%",
        textStyle: {
          fontSize: 12,
          color: "#F1F1F3",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            margin: 18,
            fontSize: 14,
          },
          axisLine: {
            lineStyle: {
              color: "#B4C0CC",
            },
          },
          data: ["13:00", "13:05", "13:10", "13:15", "13:20", "13:25", "13:30"],
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "单位（%）",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#B4C0CC",
            },
          },
          axisLabel: {
            margin: 18,
            fontSize: 14,
          },
          splitLine: {
            lineStyle: {
              color: "#B4C0CC",
            },
          },
        },
      ],
      series: [
        {
          name: "当前",
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(234, 96, 19, 0.7)",
              },
              {
                offset: 0.8,
                color: "rgba(234, 96, 19, 0)",
              },
            ], false),
            shadowColor: "rgba(234, 96, 19, 0.1)",
            shadowBlur: 10,
          },
          itemStyle: {
            color: "rgb(234, 96, 19)",
            borderColor: "rgba(234, 96, 19,0.27)",
            borderWidth: 12,
          },
          data: [50, 20, 30, 60, 45, 40, 50],
        },
        {
          name: "预警",
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 209, 92, 0.5)",
              },
              {
                offset: 0.8,
                color: "rgba(255, 209, 92, 0)",
              },
            ], false),
            shadowColor: "rgba(255, 209, 92, 0.1)",
            shadowBlur: 10,
          },
          itemStyle: {
            color: "rgb(255, 209, 92)",
            borderColor: "rgba(255, 209, 92,0.2)",
            borderWidth: 12,
          },
          data: [50, 50, 50, 50, 50, 50, 50],
        },
      ],
      dataZoom: {
        show: false,
        start: 0,
        end: 100,
        startValue: 1,
        type: "inside",
      },
    }

    option && myChart.setOption(option)
  }

  const removeGltf = () => {
    cancelAnimationFrame(animate);
    three.scene.clear();
    three.renderer.content = null;
    three?.renderer.dispose()
    three?.scene.children.forEach(child => {
      three.scene.remove(child)
    })
    
    // 清理内存中的模型数据
    three?.scene.traverse((child) => {
      if (child.isMesh) {
        child.geometry.dispose();
        if(child.material) {
          const material = Array.isArray(child.material) ? child.material : [child.material];
          material.forEach(mat => mat.dispose());
        }
      }
    });
  }

  const animate = () => {
    requestAnimationFrame(animate)
    controls.update()
    three?.renderer?.render(three.scene, three.camera)
  }

  // 返回按钮
  const backPrev = () => {
    removeGltf()
    router.push("/modelPage")
  }

  // 返回按钮 其他操作
  const initTimeout = () => {
    timeoutId = setTimeout(() => {
      isBackmore.value = true
    }, 1000)
  }

  const removeTimeout = () => {
    if (timeoutId) {
      clearTimeout(timeoutId)
      timeoutId = null
      setTimeout(() => {
        isBackmore.value = false
      }, 1500)
    }
  }

  const toPage = (page) => {
    router.push(page)
  }

  watch(isGlbShow, (newVal, oldVal) => {
    if(newVal) {
      showMoreDiv()
    }
  }, { immediate: true, deep: true })

  onMounted(() => {
    startProgress()
    showThreeGltf()
  })

  onBeforeUnmount(() => {
    removeGltf()
    if(detailCarme.value) {
      detailCarme.value.cameraShow = false
      detailCarme.value.clickStopRealPlay()
      detailCarme.value.stopAllPlay()
      detailCarme.value.destruction()
      // detailCarme.value.loginOut()
      detailCarme.value.breakDom()
    }
  })
</script>

<style lang="scss" scoped>
  .back {
    position: fixed;
    right: 500px;
    bottom: 36px;

    img {
      width: 115px;
      height: 110px;
      cursor: pointer;
    }
  }

  .backmore {
    position: fixed;
    right: 500px;
    bottom: 155px;

    .backbox {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      .backtext {
        background-image: url("@/assets/home/img_backmore_bg.png");
        background-size: 100% 100%;
        background-position: left center;
        background-repeat: no-repeat;
        font-size: 16px;
        font-weight: bold;
        color: #effff7;
        line-height: 20px;
        padding: 9px 0 8px 42Px;
        margin-bottom: 10px;
        width: 115Px;
      }
    }
  }

  .detail {
    .detail_left {
      left: 58px;
    }
    .detail_right {
      right: 58px;
    }

    .detail_unify {
      position: fixed;
      top: 122px;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: calc(100vh - 125px);

      .detail_box {
        // background-image: url('@/assets/home/img_pane_bg.png');
        // background-size: 100% 100%;
        // background-repeat: no-repeat;
        background: linear-gradient(90deg, rgba(22, 13, 0, 0.87) 0%, rgba(22, 15, 0, 0.56) 100%);
        box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.64);
        padding: 20px;
        width: 360px;
        height: 100%;
        // margin-bottom: 32px;
        margin-bottom: 1vh;

        .detailTitle {
          background-image: url("@/assets/home/img_title_bgc.png");
          // background-size: 100% 100%;
          background-position: left center;
          background-repeat: no-repeat;
          font-size: 18px;
          font-weight: bold;
          color: #effff7;
          line-height: 18px;
          padding: 7px 0 8px 13px;
          margin-bottom: 8px;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .detail_title_box {
            display: flex;
            align-items: center;

            img {
              margin-right: 10px;
            }
          }

          .detail_tit_more {
            // position: absolute;
            // right: 0;
            // top: 0;
            color: #ffc640;
            font-size: 14px;
            line-height: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;

            img {
              width: 14px;
              height: 14px;
              margin-left: 6px;
            }
          }
        }

        .detailBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .detailList {
          width: 47%;
          display: flex;
          align-items: center;
          background-image: url("@/assets/home/img_sub_bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-top: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px;

          .detail_name {
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
            line-height: 20px;
          }

          .detail_cont {
            display: flex;
            align-items: baseline;

            .detail_num {
              font-weight: bold;
              font-size: 18px;
              color: #d5e2e8;
              line-height: 29px;

              &.off {
                color: #999;
              }
              &.green {
                color: #00ff00;
              }
              &.red {
                color: #ff0000;
              }
            }

            .detail_unit {
              font-weight: 400;
              font-size: 14px;
              color: #999999;
              line-height: 20px;
              padding-left: 7px;
            }
          }
        }

        .detail_carme {
          width: 100%;
          height: 130px;
          margin-top: 10px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .pron {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, rgba(22, 13, 0, 0.87) 0%, rgba(22, 15, 0, 0.56) 100%);
    box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.21);
    padding: 20px 32px 20px 21px;
    z-index: 1;

    .pron_top {
      background-image: url("@/assets/home/img_title_bg.png");
      // background-size: 100% 100%;
      background-position: left center;
      background-repeat: no-repeat;
      font-size: 20px;
      font-weight: bold;
      color: #effff7;
      line-height: 20px;
      padding: 5px 0 10px 42px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .pron_close {
        cursor: pointer;
      }
    }

    .pron_bot {
      display: flex;

      .pron_monitor {
        // width: 1780px;
        // height: 691px;
        width: 80vw;
        min-height: 50vh;

        img {
          max-width: 100%;
        }
      }

      .pron_left {
        padding-right: 36px;

        .pron_left_cont {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-image: url("@/assets/home/img_sub_bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-bottom: 20px;
          padding: 10px;

          .pron_left_cont_name {
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
            line-height: 20px;
          }

          .pron_left_cont_text {
            display: flex;
            // align-items: center;
            align-items: baseline;

            .pron_left_cont_num {
              font-weight: bold;
              font-size: 20px;
              color: #d5e2e8;
              line-height: 29px;
            }

            .pron_left_cont_unit {
              font-weight: 400;
              font-size: 14px;
              color: #999999;
              line-height: 20px;
              padding-left: 7px;
            }

            .pron_left_cont_control {
              cursor: pointer;
              margin-left: 8px;
            }
          }
        }

        .pron_chart {
          width: 449px;
          height: 214px;
          
          #pronChart {
            width: 449px;
            height: 214px;
          }
        }
      }

      .pron_right {
        padding-left: 23px;
        border-left: 1px solid #979797;

        .pron_right_tit {
          background-image: url("@/assets/home/img_controlname_bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          padding: 7px;
          margin-bottom: 28px;

          div {
            padding-left: 10px;
            font-weight: 400;
            font-size: 18px;
            color: #ffffff;
            line-height: 26px;
          }
        }

        .pron_right_box {
          .pron_right_box_img {
            width: 224px;
            height: 252px;

            img {
              max-width: 100%;
            }
          }
        }
      }
    }
  }

  .progress_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .progress-bar {
    width: 20vw;
    height: 15px;
    display: flex;
    align-items: center;
    background-color: #999;
    border-radius: 5px;

    .bar {
      // width: 100%;
      height: 100%;
      border-radius: 5px;
      background-color: rgba($color: #d56b31, $alpha: 0.9);
      transition: width 0.5s;
    }
  }

  .label {
    color: #fff;
    font-size: 18px;
    margin-left: 20px;
  }
</style>
